<!--
 * @Author: egg1bro
 * @Date: 2022-12-27 13:32:00
 * @LastEditTime: 2023-01-08 12:15:02
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\Me\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>

    <div class="perList page">
        <!-- 导航栏 -->
        <van-nav-bar title="我" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="enlarge" size="18" />
            </template>
        </van-nav-bar>
        <!-- 个人 -->
        <div class="myself">
            <van-nav-bar @click="goPersonInfo">
                <template #left>
                    <div class="photo">
                        <van-image round width="4rem" height="4rem" fit="cover" position="center"
                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                            <template v-slot:error>加载失败</template>
                        </van-image>
                    </div>
                    <div class="name">{{ userInfo.user_name }}</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
        </div>
        <!-- list模块 -->
        <div class="list">
            <van-nav-bar>
                <template #left>
                    <van-icon class="iconfont" class-prefix='icon' name='daiban1' size="22" color="#27c6b1" />
                    <span class="listname">待办</span>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>

        </div>
        <div class="list1">
            <van-nav-bar @click="goMyCourse">
                <template #left>
                    <van-icon class="iconfont" class-prefix='icon' name='kecheng' size="22" color="#fd8379" />
                    <span class="listname">课程</span>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar @click="goNote">
                <template #left>
                    <van-icon class="iconfont" class-prefix='icon' name='bijiben' size="22" color="#27c7b1" />
                    <span class="listname">笔记本</span>

                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar>
                <template #left>
                    <van-icon class="iconfont" class-prefix='icon' name='a-tupianyihuifu-58' size="22"
                        color="#50c1fa" />
                    <span class="listname">云盘</span>

                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar>
                <template #left>
                    <van-icon class="iconfont" class-prefix='icon' name='xiaozu' size="20" color="#ff8379" />
                    <span class="listname">小组</span>

                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar>
                <template #left>
                    <van-icon class="iconfont" class-prefix='icon' name='icon_shujia' size="22" color="#fca35b" />
                    <span class="listname">书架</span>

                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
        </div>
        <div class="list2">
            <van-nav-bar>
                <template #left>
                    <van-icon class="iconfont" class-prefix='icon' name='a-yinsisimibaomi' size="22" color="#50c1fb" />
                    <span class="listname">隐私</span>

                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar @click="goSet">
                <template #left>
                    <van-icon class="iconfont" class-prefix='icon' name='shezhixitongshezhigongnengshezhishuxing'
                        size="22" color="#989898" />
                    <span class="listname">设置</span>

                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
        </div>
        <!-- 页面空白地址 -->
        <div class="extext">电脑端访问地址: i.chaoxing.com</div>
    </div>


</template>

<script setup>
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/stores/login'

// 实例化仓库
const loginStore = useLoginStore()
const { getUserInfo } = loginStore
const { userInfo } = storeToRefs(loginStore)


// 引入iconfont样式
// 实例化路由
const router = useRouter()


//跳转到设置set页面
const goSet = () => {
    router.push('/set')
}

// 跳转到我的课程页面
const goMyCourse = () => {
    router.push('/mycourse')
}
// 跳转到个人信息页面
const goPersonInfo = () => {
    router.push('/personInfo')
}

// 跳转到笔记页面
const goNote = () => {
    router.push('/note')
}

// 生命周期钩子
onMounted(async () => {

    try {
        await getUserInfo()
        console.log(userInfo.value.user_name, 'me');
    } catch (error) {
        return Promise.reject(error)
    }
})
</script>

<style lang="less" scoped>
.page {
    width: 100%;
    height: 100%;
    background-color: #f5f6f8;
    // 此处写fixed才能应用到当前页面公共背景颜色
    position: fixed;
}

.extext {
    text-align: center;
    color: #d4d5d5;
    padding-top: 5px;
    font-weight: bold;
    font-size: 12px;
}

.listname {
    color: #6e6e6e;
    // font-weight: bold;
    font-size: 13px;
}

.iconfont {
    margin-right: 12px;
    margin-left: 15px;

}



.perList {
    background-color: #f5f6f8;

    .myself {
        margin-bottom: 10px;
        --van-nav-bar-height: 90px;
        --van-nav-bar-title-text-color: black;

        .photo {
            margin-left: 6px;
            margin-top: 5px;
        }

        .name {
            margin-left: 15px;
            color: #6e6e6e;
        }

    }

    .list {
        --van-nav-bar-height: 50px;
        --van-nav-bar-title-text-color: black;
        --van-font-bold: 600;
        margin-bottom: 10px;
    }

    .list1 {
        --van-nav-bar-height: 50px;
        --van-nav-bar-title-text-color: black;
        --van-font-bold: 600;
        margin-bottom: 10px;

    }

    .list2 {
        --van-nav-bar-height: 50px;
        --van-nav-bar-title-text-color: black;
        --van-font-bold: 600;
        margin-bottom: 10px;
    }
}

// 去除navbar默认带的下线
.van-hairline--bottom:after {
    border-bottom-width: 0;
}
</style>